<template>
  <view @tap="jumpChainPage" v-if="checkValue && hasChain" style="margin-bottom:10px">
    <view class="chainTop">
      <view class="chainTop__content">
        <view class="line">
          <view class="circle"></view>
          <view class="lineOne"></view>
          <view class="LineTwo"></view>
        </view>
        <span style="font-size:16px;">接龙活动</span>
        <view class="line">
          <view class="circle"></view>
          <view class="lineOne"></view>
          <view class="LineTwo"></view>
        </view>
      </view>
    </view>
    <view class="chainDesc">
      <view class="chainDesc__top">
        <span class="title">{{activityDetail.name}}</span>
        <span class="day" v-if="countDetail.status === 'ended'">
          {{activityDetail.stopTime}}
        </span>
      </view>
      <view class="chainDesc__desc">{{activityDetail.content}}</view>
      <view class="chainDesc__img">
        <image :src="activityDetail.coverPoster" alt style="width:100%;height: 170px" :lazy-load="true"></image>
      </view>
      <view class="chainDesc__list" v-if="activityDetail.solitaireRecords.length>0">
        <view v-for="(item, index) in activityDetail.solitaireRecords" :key="index">
          <view class="chainDesc__list--content">
            <view class="line">
              <view style="display:flex;width:80px;align-items:center;justify-content: space-between;">
                <view class="contentId">{{item.sign}}.</view>
                <image :src="item.buyerIcon" alt class="img" :lazy-load="true"></image>
              </view>
              <view
                style="color:#6B6B6B;width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:10px">
                {{item.buyerName}}
              </view>
            </view>
            <view style="display:flex;width:45%;align-items:center;justify-content: space-between;">
              <view style="color:#6B6B6B">{{item.createTime}}</view>
              <view style="color:#6B6B6B;display:flex">
                <view
                  style="color:#6B6B6B;width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:10px">
                  {{item.productName}}
                </view>
                + {{item.productQuantity}}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="chainBottom">
      <view class="chainBottom__left">
        <span>有{{activityDetail.views}}人看过</span>
        <span style="margin-left:10rpx">{{activityDetail.userRecords}}人参与</span>
      </view>
      <view class="time__count" v-if="countDetail.status != 'ended'">
        <view class="time__count--text">
          <text>还剩</text>
        </view>
        <u-count-down :time="remainTime" @change="handleChange">
          <view style="display:flex;align-items: center;">
            <view class="time">{{ timeData.hours[0] }}</view>
            <view class="time">{{ timeData.hours[1] }}</view>
            <view class="time" v-if="timeData.hours.length >2">{{ timeData.hours[2] }}</view>
            <view class="colon">:</view>
            <view class="time">{{ timeData.minutes[0] }}</view>
            <view class="time">{{ timeData.minutes[1] }}</view>
            <view class="colon">:</view>
            <view class="time">{{ timeData.seconds[0] }}</view>
            <view class="time">{{ timeData.seconds[1] }}</view>
          </view>
        </u-count-down>
      </view>
      <view class="chainBottom__status" v-if="countDetail.status === 'aboutToBegin'">距开始</view>
      <view class="chainBottom__status" v-if="countDetail.status === 'beginning'">进行中</view>
      <view class="chainBottom__status" style="background-color: #CCCCCC;" v-if="countDetail.status === 'ended'">
        已结束
      </view>
    </view>
  </view>
</template>

<script lang=ts>
  import {
    Component,
    Vue,
    Prop,
    Watch
  } from 'vue-property-decorator'
  import {
    getActivityList,
    getActivitySetting
  } from "@/api/modules/chain";
  import DateUtil from "@/mixins/date";

  @Component({})
  export default class HomeChain extends Vue {
    @Prop({
      type: Object
    })
    decoretionProperties: Object
    @Watch("decoretionProperties")
    onPropUpdate() {
      this.formData = this.decoretionProperties
      this.getActivitySetting();
    }

    formData: Object = {}
    preList: Array < any > = []

    /** 接龙是否开启 */
    checkValue: boolean = false
    /** 是否有接龙活动 */
    hasChain: boolean = true
    /** 获取活动详情 */
    activityDetail: any = {}
    /** 活动信息 */
    countDetail: any = {}
    /** 倒计时 */
    timeData: any = {}
    /** 倒计时状态 */
    state: String = ""
    showType: boolean = false

    remainTime=0
    showCountDown: any = {}

    // 组件周期函数--监听组件挂载完毕
    mounted() {
      this.formData = this.decoretionProperties
      this.getActivitySetting();
    }

    /**
     * 获取接龙活动开关状态
     */
    getActivitySetting() {
      getActivitySetting({}).then(res => {
        this.checkValue = Boolean(res.activityState)
        if (this.checkValue) {
          this.getActivity();
        }
      });
    }

    /**
     * 获取接龙活动信息
     */
    getActivity() {
      getActivityList({})
        .then(res => {
          const countDownInfo = this.getCountDownInfo(res);
          this.dealTime(countDownInfo);
          if (res.solitaireRecords) this.dealSolitaire(res);
          const {
            now,
            end,
            show
          } = this.getConstData(res);
          if (now > end) {
            const culTime = now - end;
            const h = culTime / 3600000;
            const m = (culTime % (1000 * 60 * 60)) / (1000 * 60);
            if (h > 24) {
              const now = new Date().getTime();
              const stop = new Date(res.endTime.replace(/-/g, "/")).getTime();
              let day = ((now - stop) / 1000 / 24 / 60 / 60) as any;
              day = day.toFixed(0);
              res.stopTime = `${day}天前`;
            } else if (h > 1) {
              res.stopTime = `${h.toFixed(0)}小时前`;
            } else if (m > 0) {
              res.stopTime = `${m.toFixed(0)}分钟前`;
            }
          }
          this.activityDetail = res
          this.showType = now > show ? true : false
        })
        .catch(() => {
          this.hasChain = false
        });
    }

    /**
     * 处理接龙信息
     */
    dealSolitaire(res) {
      res.solitaireRecords.forEach((item, index) => {
        item.createTime =
          Number(new DateUtil("").getD(new Date())) -
          Number(new DateUtil("").getD(item.payTime)) >
          0 ?
          `${Number(new DateUtil("").getD(new Date())) -
              Number(new DateUtil("").getD(item.payTime))}天前` :
          new DateUtil("").getHM(item.payTime);
        item.sign =
          res.orderRecords > 4 ?
          res.orderRecords - index :
          res.solitaireRecords.length - index;
      });
    }

    /**
     * 处理数据
     */
    getConstData(res) {
      const now = Date.now();
      const end = Date.parse(res.endTime.replace(/-/g, "/"));
      const start = Date.parse(res.startTime.replace(/-/g, "/"));
      const showTime = new DateUtil("").getHMSs(
        start,
        res.preheatHour * 60 * 60 * 1000,
      );
      const show = Date.parse(showTime.replace(/-/g, "/"));
      return {
        now,
        end,
        show,
      };
    }

    /**
     * 获取倒计时
     */
    getCountDownInfo(item) {
      const dateNow = Date.now();
      const activityBeginTime = new Date(
        item.startTime.replace(/-/g, "/"),
      ).getTime();
      const activityEndTime = new Date(item.endTime.replace(/-/g, "/")).getTime();
      let toBeginTime = activityBeginTime - dateNow;
      let toEndTime = activityEndTime - dateNow;
      let remainTime = 0; //
      let status = "";
      if (dateNow < activityBeginTime) {
        // 将要开始
        status = "aboutToBegin";
        remainTime = toBeginTime;
      } else if (dateNow >= activityBeginTime && dateNow < activityEndTime) {
        // 已开始
        status = "beginning";
        toBeginTime = 0;
        remainTime = toEndTime;
      } else if (dateNow >= activityEndTime) {
        // 已结束
        status = "ended";
        toEndTime = 0;
        remainTime = 0;
        this.timeData = {
          hours: this.formatNumber(0),
          minutes: this.formatNumber(0),
          seconds: this.formatNumber(0),
        }
      }
      return {
        status,
        remainTime,
        toBeginTime,
        toEndTime,
      };
    }

    /**
     * 获取时间信息
     */
    dealTime(options) {
      this.timeData = options.timeData
      this.remainTime = options.remainTime
      this.showCountDown = true,
        this.countDetail.status = options.status
      this.countDetail.toBeginTime = 0
      this.countDetail.toEndTime = {
        aboutToBegin: options.toEndTime - options.remainTime,
        beginning: 0,
        ended: 0,
      } [options.status] || 0
    }

    /**
     * 倒计时变化
     * @param e
     */
    handleChange(e) {
      if(this.remainTime===0) return
      const {
        days,
        hours,
        minutes,
        seconds
      } = e;
      const h = hours + days * 24;
      this.timeData = {
        hours: this.formatNumber(h),
        minutes: this.formatNumber(minutes),
        seconds: this.formatNumber(seconds),
      }
      if (h === 0 && minutes === 0 && seconds === 0) {
        this.getActivity();
      }
    }

    /**
     * 格式化时间
     * @param n
     */
    formatNumber(n) {
      n = n.toString();
      return n[1] ? n : "0" + n;
    }

    /**
     * 跳转到接龙详细页面
     */
    jumpChainPage() {
      const id = this.activityDetail.id;
      uni.navigateTo({
        url: `/subcontract/pages/chainDetail/chainDetail?id=${id}`,
      });
    }
  }
</script>

<style lang="scss" scoped>
  .line {
    display: flex;
    align-items: center;
  }

  .circle {
    width: 8px;
    height: 8px;
    background-color: #E75E75;
    border-radius: 50px;
  }

  .lineOne {
    width: 8px;
    height: 20px;
    border-radius: 10px;
    background-color: #EEB84E;
    transform: skewX(-35deg);
    margin-left: 8px;
  }

  .LineTwo {
    width: 8px;
    height: 16px;
    border-radius: 10px;
    background-color: #E78159;
    transform: skewX(-35deg);
    margin-left: 8px;
  }

  @include b(chainTop) {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    background-color: white;

    @include e(content) {
      display: flex;
      align-items: center;
      width: 180px;
      justify-content: space-between;
    }
  }

  @include b(chainDesc) {
    padding: 20px 20px 0px 20px;
    background-color: white;

    @include e(top) {
      display: flex;
      justify-content: space-between;

      .title {
        font-size: 18px;
        font-weight: 700;
      }

      .name {
        font-size: 18px;
        font-weight: bold;
      }

      .day {
        font-size: 14px;
        color: #bcbcbc;
      }
    }

    @include e(desc) {
      margin-top: 10px;
      color: #868686;
    }

    @include e(img) {
      width: 100%;
      margin-top: 10px;
    }

    @include e(list) {
      margin-top: 10px;

      @include m(content) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 5px;
        font-size: 13px;
        width: 100%;

        .line {
          display: flex;
          align-items: center;
          width: 50%;

          .contentId {
            width: 20px;
            display: flex;
            justify-content: flex-end;
          }

          .img {
            width: 40px;
            height: 40px;
            border-radius: 50px;
          }
        }
      }
    }
  }

  @include b(chainBottom) {
    display: flex;
    padding: 10px 20px 10px 20px;
    margin-top: -5px;
    font-size: 12px;
    justify-content: space-between;
    align-items: center;
    color: #A1A1A1;
    background-color: white;

    @include e(left) {
      // width: 140px;
      display: flex;
      justify-content: flex-start;
    }

    @include e(status) {
      width: 60px;
      height: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50px;
      font-size: 12px;
      color: white;
      background-color: #F73119;
    }
  }

  .time__count {
    display: flex;
    align-items: center;
  }

  .time__count--text {
    text-align: center;
    margin: 0px 4px;
    color: #A1A1A1;
  }


  .colon {
    margin-left: 4rpx;
    margin-right: 8rpx;
    margin-bottom: 4rpx;
  }

  .time {
    width: 20rpx;
    height: 30rpx;
    margin-right: 4rpx;
    background-color: #000000;
    text-align: center;
    font-size: 22rpx;
    font-family: HiraginoSansGB-W3;
    font-weight: normal;
    color: #fff;
    line-height: 42rpx;
    border-radius: 6rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 1px;
  }
</style>